<template>
	<view>
		<view v-if="isShow" @click="show" class="mask" @touchmove.stop.prevent="()=>{}" catchtouchmove="true"></view>
		<view v-if="isShow" class="course-comment center column">
			<uni-rate :size="22" v-model="comment.score" ></uni-rate>
			<text class="desc">{{descArr[comment.score-1]}}</text>
			<view class="input-box center">
				<textarea :value="comment.content" @input="getContent" class="textarea" placeholder="请输入评价内容……"></textarea>
				<text class="btn" @click="submitComment">提交</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		props: {
			comment: {
				type: Object,  
				
				default: ()=>({
					userId: 1, 
					nickName: 'xxx梦', 
					userImage: 'xxx.png', 
					content: '', 
					score: 5 
				})
			},
			descArr: {
				type: Array,  
				default: () => [
					'极差,课程很糟糕，我要吐槽。',
					'差,我对课程不满意。',
					'中评,课程一般。',
					'良好,课程还可以。',
					'推荐,课程非常棒。'
				]
			}
		},

		data() {
			return {
				isShow: false, // 控制评论窗口显示状态，默认不显示
			}
		},

		methods: {
			show() {
				// 切换显示状态
				this.isShow = !this.isShow
			},

			// 获取评论框内容方法
			getContent(e) {
				this.comment.content = e.detail.value
			},

			// 提交评论方法
			submitComment() {
				this.comment.content = this.comment.content.trim()
				this.$emit('submitComment', this.comment)
			}
		}
	}
</script>

<style lang="scss">
	/* 课程评论弹窗样式 */
	.course-comment {
		z-index: 100;           // 层级
		position: fixed;        // 固定定位
		left: 0;               // 左边距离
		right: 0;              // 右边距离
		bottom: 50%;           // 距离底部50%
		width: 650rpx;         // 宽度
		margin: 0 auto;        // 水平居中
		padding-top: 30rpx;    // 上内边距
		font-size: 30rpx;      // 字体大小
		background-color: #FFFFFF;  // 背景颜色
		border-radius: 20rpx;       // 圆角

		/* 评分描述文本样式 */
		.desc {
			color: $mxg-text-color-black;  // 文字颜色
			letter-spacing: 2px;           // 字符间距
			padding: 20rpx 0;              // 垂直内边距
		}

		/* 输入框容器样式 */
		.input-box {
			border-top: $mxg-underline;  // 顶部边框
			width: 100%;                 // 宽度
			white-space: nowrap;         // 不换行
		}

		/* 文本域样式 */
		.textarea {
			background-color: #F8F9FB;   // 背景颜色
			border-radius: 0 0 0 20rpx;  // 圆角
			height: 100rpx;              // 高度
			font-size: 30rpx;            // 字体大小
			padding: 10rpx;              // 内边距
			width: 100%;                 // 宽度
		}

		/* 提交按钮样式 */
		.btn {
			padding: 0 15rpx;            // 水平内边距
			color: $mxg-text-color-blue; // 文字颜色
		}
	}
</style>
